/* RESET */
p,ul,li,em { list-style:none; margin:0; padding:0; font-style:normal; }

body { background: url(../Images/harmon_dark_blue.jpg) repeat; font:12px/17px "Arial", sans-serif; text-align:center; }
a:link,
a:visited { color:#FFEEC6; text-decoration:none; }
a:hover { color:#000; text-decoration:none; }

/* STRUCTURE */
#wrap { margin:auto; width:auto; text-align:left;}
#header {position:relative; background:url(../Images/bann.jpg); height: 120px; text-align: center; padding-top: 10px;}
#content {width: 1200px; background:#fff url(../Images/paper.jpg) repeat; border:1px solid #cfcfcf; margin:auto; padding:0 5px 0 5px; min-height:1000px; }
#main {z-index: 1; margin: 70px 20px 70px 20px; max-width:1100px; min-width: 1000px; }

/* HEADER */
#header em
{
	color: #ffd133;
	text-shadow: 0.2em 0.2em 0.1em #f1df7b;
	font-size: 40px;
}

/* MISC */
input {width: 140px; margin-bottom: 20px;}
select{margin-bottom: 20px;}

table
{
	border-style: none;
}
td, th
{
	border-style: none;
	border-radius: 3px;
	text-align: center;
}

h1
{
	text-align: center;
	color:#B06100;
	font-size: 42px; 
	font-family: serif; 
	font-weight: bold;
}

h2
{
	text-align: center;
	background:#575964;
	font-size: 20px; 
	font-family: serif; 
	font-weight: bold;
	padding: 5px 0 5px 0;
}


.button
{
	border-radius: 3px;
	background: rgb(238,238,238); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url();
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-8 */
	text-align: center;
	color:black;
}

.button:hover
{
	background: rgb(224,243,250); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url();
	background: -moz-linear-gradient(top,  rgba(224,243,250,1) 0%, rgba(216,240,252,1) 40%, rgba(184,226,246,1) 71%, rgba(182,223,253,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,243,250,1)), color-stop(40%,rgba(216,240,252,1)), color-stop(71%,rgba(184,226,246,1)), color-stop(100%,rgba(182,223,253,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 40%,rgba(184,226,246,1) 71%,rgba(182,223,253,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 40%,rgba(184,226,246,1) 71%,rgba(182,223,253,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 40%,rgba(184,226,246,1) 71%,rgba(182,223,253,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 40%,rgba(184,226,246,1) 71%,rgba(182,223,253,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#b6dffd',GradientType=0 ); /* IE6-8 */
}

/* TABS */
.online{display:none;}

#menus
{
	position: absolute;	width: 1200px;
}

#menus>div>ul>li
{
	float: left;
}
#menus>div>ul>li>a
{
	float:left;
	text-align:center;
  color: #86a1ec;
	padding:5px 0 5px 0;
	width:140px;
	background: rgb(96,108,136); /* Old browsers */
	background: -moz-linear-gradient(-45deg, rgb(96,108,136) 0%, rgb(63,76,107) 66%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgb(96,108,136)), color-stop(66%,rgb(63,76,107))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, rgb(96,108,136) 0%,rgb(63,76,107) 66%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, rgb(96,108,136) 0%,rgb(63,76,107) 66%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, rgb(96,108,136) 0%,rgb(63,76,107) 66%); /* IE10+ */
	background: linear-gradient(135deg, rgb(96,108,136) 0%,rgb(63,76,107) 66%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
	border-radius: 0 0 8px 8px;
	border-bottom: solid 2px;
}
#menus>div>ul>li>ul
{
	height: 0px;
	z-index: 2;
	position: relative;
	visibility: hidden;
	text-align: center;
}

#mainMenu
{
	float:left;
}
#mainMenu>ul>li:hover>ul
{
	margin-top:28px;
	background: rgb(96,108,136); /* Old browsers */
	background: -moz-linear-gradient(-45deg, rgb(96,108,136) 0%, rgb(63,76,107) 66%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgb(96,108,136)), color-stop(66%,rgb(63,76,107))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, rgb(96,108,136) 0%,rgb(63,76,107) 66%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, rgb(96,108,136) 0%,rgb(63,76,107) 66%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, rgb(96,108,136) 0%,rgb(63,76,107) 66%); /* IE10+ */
	background: linear-gradient(135deg, rgb(96,108,136) 0%,rgb(63,76,107) 66%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
	height: auto;
	border-radius: 8px;
	visibility: visible;
}
#mainMenu>ul>li>ul>li>a:hover
{
	color: #B06100;
}

#connectionMenu
{
	float:right;
	color: #86a1ec;
}
#connectionMenu>ul>li
{
	float:left;
}
#connectionMenu>div
{
	background: rgb(96,108,136); /* Old browsers */
	background: -moz-linear-gradient(-45deg, rgb(96,108,136) 0%, rgb(63,76,107) 66%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgb(96,108,136)), color-stop(66%,rgb(63,76,107))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, rgb(96,108,136) 0%,rgb(63,76,107) 66%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, rgb(96,108,136) 0%,rgb(63,76,107) 66%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, rgb(96,108,136) 0%,rgb(63,76,107) 66%); /* IE10+ */
	background: linear-gradient(135deg, rgb(96,108,136) 0%,rgb(63,76,107) 66%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
	text-align: center;
	z-index: 3;
	height: 0px;
	width: 280px;
	position: relative;
	visibility: hidden;
	border-radius: 8px;
	padding: 10px 0 20px 0;
}
#connectionMenu>div .button
{
	color:black;
	padding: 5px 30px 5px 30px;
}

/* **** */
/* HOME */
/* **** */

/* USER */
#UserInfo{text-align:center; width: auto;}

/* RACES */

#raceInfo .race {overflow: hidden; height:100%;}
#raceInfo .raceImg { float:left; width: 230px; height:230px; background-image:url(../Images/frame.png); background-size:100% 100%; margin: 0 10px 0 5px;}
	#raceInfo .raceImg img{padding: 15px 15px 15px 15px; height: 200px; width: 200px;}
#raceInfo .raceText {float: left; min-height:210px; padding: 10px 20px 10px 20px; width: 800px; margin: 0 5px 0 10px;}

/* SCREENS */

#screens{text-align:center;}
	#screens div:nth-child(3){margin:auto; background:url(../Images/frame.png); width:460px; height:460px; right:50%;}
	#screens div:nth-child(3) img{padding: 30px 30px 30px 30px; height: 400px; width: 400px;}


.icon {height:30px; width:30px;}

/* ********** */
/* MANAGEMENT */
/* ********** */

/* TABLES */
.stats {float:left;}
.stats th{height:20px; width:20px;}
.stats img{height:20px; width:20px;}

/* STRUCTURE TROOPS + BUILDINGS */

#troopManagement .button{width:130px; height:60px; float:left; padding: 0px;}
#troopManagement .button div{font-size:18px; margin:20px auto 20px auto; width:100%; padding: 0px; color:black;}

#troopManagement
{
	margin:0 10px 10px 10px;
	overflow: hidden;
	height:100%;
}

#troopManagement>div:nth-child(2)
{
	text-align: center;
	background:#575964;
}
#troopManagement>div:nth-child(4)
{
	text-align: center;
	background:#575964;
}
.unit
{
	width:260px;
	float: left;
	margin: 5px 5px 5px 5px;
	background:#fff;
	border-radius: 8px;
}

.unitImg
{
	width:100px;
	float:left;
}
	.unitImg img
	{
		width:100px;
		height:160px;
	}

.building
{
	width:260px;
	float: left;
	margin: 5px 5px 5px 5px;
	background:#fff;
	border-radius: 8px;
}

.buildingImg
{
	width:150px;
	height:100px;
	float:left;
}
	.buildingImg img
	{
		width:150px;
	}

.title
{
	text-align:center;
	background:#575964;
	border-radius: 8px 8px 0 0;
	font-size:20px;
	padding:5px 0 5px 0;
}
.unit>div:nth-child(2)
{
	width:50px;
	float:left;
}

.quantity
{
	height:40px;
	width: 106px;
	float:left;
	text-align:center;
	padding-top:20px;
	font-size:26px;
}

#buildingManagement .button{width:130px; height:60px; float:left; }
#buildingManagement .button div{font-size:18px; margin:20px auto 20px auto; width:100%; color:black;}

#buildingManagement
{
	margin:0 10px 10px 10px;
	overflow: hidden;
	height:100%;
}
#buildingManagement>div:nth-child(2)
{
	text-align: center;
	background:#575964;
}
#buildingManagement>div:nth-child(4)
{
	text-align: center;
	background:#575964;
}


/* STRUCTURE RESOURCES */
#ResourcesManagement{padding: 10px 10px 10px 10px;}
#ResourcesManagement th {width:10%;}
#ResourcesManagement img {width: 140px; height:100px;}
#ResourcesManagement table {width:100%; text-align:center; background:#fff;}